<template>
    <ul class="top_nav">
        <li>
            <router-link to="/">推荐音乐</router-link>
        </li>
        <li>
            <router-link to="/hot">热歌榜</router-link>
        </li>
        <li>
            <router-link to="/search">搜索</router-link>
        </li>
    </ul>
</template>

<script>
export default {
    name: 'TopNav',
}
</script>

<style lang="less" scoped>
    .top_nav {
        display: flex;
        width: 100%;
        border-bottom: 1px solid #eee;
        background-color: #fff;
        position: fixed;
        top: 0px;
        left: 0px;
        // padding-bottom: 40px;
        // transform: translateX(-50%);
        z-index: 99;
        li {
            flex: 1;
            height: 40px;
            line-height: 40px;
            a {
                display: inline-block;
                text-decoration: none;
                color: #333;
                font-size: 15px;
                &.router-link-exact-active {
                    color: #dd001b;
                    border-bottom: 2px solid #dd001b;
                }
            }
        }
    }
</style>